/*—————————————————————————————————————————————————————————— antd公共配置组件 ——————————————————————————————————————————————————————————*/
import React from 'react'
import { ConfigProviderAppProp } from './interface' // 接口引入
import config from '@/common/config/config' // 公共样式配置引入
import zhCN from 'antd/es/locale/zh_CN';

// redux全类型hooks引入
// --------------------------------------------------------------------------------------------------------
import { useAppSelector } from '@/utils/hooks'

// 样式+适配文件引入区
// ---------------------------------------------------------------------------------------------
import { ConfigProvider, App as AppElement, Spin } from 'antd' // antd自定义模板

const ConfigProviderApp: React.FC<ConfigProviderAppProp> = ({ children }) => {
  // 获取本页面的公共模块模块数据
  const publicStore = useAppSelector(state => state.publicStore)

  return (
    <ConfigProvider theme={config.configProvider} componentSize={config.componentSize} locale={zhCN}>
      {/* 全局loading绑定 */}
      <Spin style={{ maxHeight: '100%' }} spinning={publicStore.overallLoading} tip={publicStore.overallLoadingText} size="large">
        {/* APP组件使用 */}
        <AppElement message={{ maxCount: 3 }}>{children}</AppElement>
      </Spin>
    </ConfigProvider>
  )
}

export default ConfigProviderApp
